<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择人员</title>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="../lib/css/style.css">
    <script src="../lib/jquery/jquery.js"></script>
    <script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../lib/jstree/themes/default/style.min.css">
    <script src="../lib/vue/vue.js"></script>
    <script src="../lib/vue/vue-util.js"></script>
    <script src="../lib/jstree/jstree.min.js"></script>

    <script src="../lib/artTemplate/template-web.js"></script>
    <style>
        #app{
            display: flex;
            flex-direction: column;
        }
        .ulist{
            text-align: center;
            flex: 1;
            overflow: auto;
            height: 100%;
        }
        .ulist .item{
            width: 100%;
            padding-top: 5px;
            padding-bottom: 5px;
            text-align: center;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            color: #666;
        }
        .selected{
            background: #409eff;
            color:white !important;
        }

        .action{
            color: #333;
            font-weight: bold;
        }

        input:checked + .bg {
            /*background: #337ab7;*/
            /*color: white;*/
        }
        .taskHeader{
            height: 30px;
            background: #c4de83;
            border: 1px #9cb269 solid;
            font-weight: bold;
            color: #383838;
            line-height: 23px;
            padding: 0px;
            padding-left: 5px;
        }
        .tableBlock{
            border: 1px #cccccc solid;
            line-height: 20px;
            font-size: 9pt;
            border-collapse: collapse;
        }
        .tableData{
            BACKGROUND: #FFFFFF;
            COLOR: #000000;
        }
        .tableBlock .tableData td, .tableBlock td .tableData {
            background: #FFFFFF;
            border-bottom: 1px #cccccc solid;
            border-right: 1px #cccccc solid;
            padding: 3px;
            height: 30px;
        }
        tr {
            display: table-row;
            vertical-align: inherit;
            border-color: inherit;
        }

        .ulist td{
            border: solid #efefef 1px;
        }

        input:checked + .bg {
            background: #409eff;
            color: white;
        }
        #submit {
            position: fixed;
            bottom: 5px;
            /*right: 20px;*/
            text-align: center;
        }

    </style>
</head>
<body>
<div id="app">
    <ul id="myTabsBpm" class="nav nav-tabs" role="tablist" style="margin-bottom: 10px;">
        <li class="active" v-if="hasMainUser()" ><a href="#select4" class="" role="tab"  data-toggle="tab" aria-controls="select4" aria-expanded="true" >选择主办人</a></li>
        <li :class="{active: !hasMainUser()}"><a href="#select5" class="" role="tab"  data-toggle="tab" aria-controls="select5" aria-expanded="true" >选择经办人</a></li>
        <!--<li class="active"><a href="#select1" class="" role="tab"  data-toggle="tab" aria-controls="select1" aria-expanded="true" >全部经办人</a></li>-->
        <!--<li><a href="#select2" role="tab"  data-toggle="tab" aria-controls="taskBpm3" aria-expanded="true" >按流程选择</a></li>-->
<!--        <li><a href="#select3" class="" role="tab"  data-toggle="tab" aria-controls="select3" aria-expanded="true" >按部门选择</a></li>-->
    </ul>
    <div id="myTabContentBpm" class="tab-content" style="min-height:120px;">
        <!--<div role="tabpanel" class="tab-pane active" id="select1" aria-labelledby="select1-tab">
            <table class="ulist" width="100%" class="tableBlock">
                <tr class="tableData">
                    <td class="taskHeader" colspan="2">全部经办人</td>
                </tr>
                <tr class="tableData">
                    <td class="action item" @click="cancelAll(selected)" colspan="2">全部删除</td>
                </tr>
                <tr class="tableData">
                   <td class="action item" @click="chooseAll(users)" colspan="2">全部添加</td>
                </tr>
                <tr v-for="v in users" class="tableData" >
                    <td v-if="opener.app.isMainUid">
                        <label >
                            <input type="checkbox" v-model="main" :value="v.uid" @change="onMainChecked(v)">
                            <span class="bg">主办</span>
                        </label>
                    </td>
                    <td>
                        <div class="item" :class="{selected: selected[v.uid]}"  @click="choose(v)">
                            {{v.utname}}
                        </div>
                    </td>
                </tr>
            </table>

        </div>-->
        <!--选择主办人-->
        <div role="tabpanel" class="tab-pane active" id="select4" aria-labelledby="select1-tab" v-if="hasMainUser()">
            <table class="ulist" width="100%" class="tableBlock">
                <tr class="tableData">
                    <td class="taskHeader" colspan="2">全部主办人</td>
                </tr>
                <tr v-for="v in users" class="tableData" >
                    <td >
                        <label >
                            <input type="radio" v-model="main" :value="v.uid" name="mainUsers" >
                            <span class="bg">主办</span>
                        </label>
                    </td>
                    <td>
                        <div class="item">
                            {{v.utname}}
                        </div>
                    </td>
                </tr>

            </table>

        </div>
        <!--选择经办人-->
        <div role="tabpanel" class="tab-pane" id="select5" aria-labelledby="select1-tab" :class="{active: !hasMainUser()}">
            <table class="ulist" width="100%" class="tableBlock">
                <tr class="tableData">
                    <td class="taskHeader" colspan="2">全部经办人</td>
                </tr>
                <tr class="tableData">
                    <td class="action item" @click="cancelAll(selected)" colspan="2">全部删除</td>
                </tr>
                <tr class="tableData">
                    <td class="action item" @click="chooseAll(users)" colspan="2">全部添加</td>
                </tr>
                <tr v-for="v in users" class="tableData" >
                    <td>
                        <div class="item" :class="{selected: selected[v.uid]}"  @click="choose(v)">
                            {{v.utname}}
                        </div>
                    </td>
                </tr>
            </table>

        </div>
        <div role="tabpanel" class="tab-pane" id="select2" aria-labelledby="taskBpm2-tab" style="">
            <div style="display: flex; flex-direction: row; height: 100%;">
                <!--<div id="jstree_demo" style="overflow:auto;">-->
                <!--</div>-->
                <!--<div class="ulist">
                    <div class="taskHeader" >按流程选择</div>
                    <div class="action item" @click="cancelAll(selected)">全部删除</div>
                    <div class="action item" @click="chooseAll(users)">全部添加</div>

                    <div v-for="v in users">
                        <div class="taskHeader">
                            {{v.nodeName}}
                        </div>

                        <span>
                            <label >
                                <input type="radio" name="uuname" :class="{selected: selected[v.uid]}">主办
                            </label>
                            <div class="item" :class="{selected: selected[v.uid]}"  @click="choose(v)">
                                {{v.utname}}
                            </div>
                        </span>
                    </div>
                </div>-->
            </div>
        </div>
        <div width="100%" role="tabpanel" class="tab-pane" id="select3" aria-labelledby="select3-tab" style="">
            <div style="display: flex; flex-direction: row; height: 100%;">
                <div id="jstree_demo" style="overflow:auto;">
                </div>

                <table class="ulist " width="43%" class="tableBlock" style="margin-left: 10px">
                    <tr class="tableData">
                        <td class="taskHeader" colspan="2">{{dusName}}</td>
                    </tr>
                    <tr class="tableData">
                        <td class="action item" @click="cancelAll(dus)" colspan="2">全部删除</td>
                    </tr>
                    <tr class="tableData">
                        <td class="action item" @click="chooseAll(dus)" colspan="2">全部添加</td>
                    </tr>
                    <tr v-for="v in dus" class="tableData" >
                        <td v-if="opener.app.isMainUid">
                            <label >
                                <input type="checkbox" v-model="main" :value="v.uid" @change="onMainChecked(v)">
                                <span class="bg">主办</span>
                            </label>
                        </td>
                        <td>
                            <div class="item" :class="{selected: selected[v.uid]}"  @click="choose(v)">
                                {{v.utname}}
                            </div>
                        </td>
                    </tr>
                </table>

                <!--<div class="ulist">-->
                    <!--<div class="action item" @click="cancelAll(dus)">全部删除</div>-->
                    <!--<div class="action item" @click="chooseAll(dus)">全部选择</div>-->
                    <!--<div class="item" :class="{selected: selected[v.uid]}" v-for="v in dus" @click="choose(v)">{{v.utname}}</div>-->
                <!--</div>-->
            </div>
        </div>
    </div>
    <div style="text-align: center; padding-top: 20px;">
        <a href="javascript:;" id="submit" class="btn btn-primary btn-sm">确定</a>
    </div>

    <!--<div id="content" class="hide">-->
        <!--<div style="width: 500px;margin: 0 auto;">-->
            <!--&lt;!&ndash;<ul id="ulist" style="height: 200px; overflow: auto;margin: 0 auto;">&ndash;&gt;-->
            <!--&lt;!&ndash;</ul>&ndash;&gt;-->
            <!--<div id="ulist">-->
            <!--</div>-->
            <!--<div style="text-align: center; padding-top: 20px;">-->
                <!--<a href="javascript:;" id="submit">确定</a>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
</div>
    <!--<td>-->
        <!--<label>-->
            <!--<input type="radio" class="select-user" name="person" value="{{item.uid}}">主办-->
        <!--</label>-->
    <!--</td>-->
</body>
</html>

<script type="text/plain" id="user">

    <table width="100%" id="table1">
    {{each data item index}}
        <tr>

            <td>
                <div class="bg" id="{{item.uid}}" style="text-align: center;">
                    &nbsp;
                    {{item.utname}}
                </div>
            </td>
        </tr>
    {{/each}}
    </table>


<!--{{each data item index}}-->
<!--<li>-->
    <!--<label>-->
        <!--<input type="checkbox" class="select-user" name="person" value="{{item.uid}}">-->
        <!--<span name="ss" class="hide">{{item.utname}}</span>-->

        <!--&nbsp;-->
        <!--{{item.msg}}-->
        <!--&nbsp;-->
        <!--{{item.uname}}-->

    <!--</label>-->
<!--</li>-->
<!--{{/each}}-->
</script>
<script>
    // var id = getParam("id");
    var id = location.search.match(/id=([^&]+)/)[1];
    // var sponsor = getParam("sponsor");
    // var ids = JSON.parse(JSON.stringify(opener.app.agent));
    // var mainSponsor =[];
    // $.each(opener.app.mainSponsor,function (i, item) {
    //     mainSponsor.push(i);
    // })
    // 合并节点 选人时传的节点id
    // var nodeId = getParam("nodeId");
    // var zbr = sponsor || '';
    // var names = [];
    // var tmpl = template.compile($("#user").html())


    var app = new Vue({
        el: "#app",
        data:{
            dus:[],
            dusName:"部门",
            users:[],
            main:"",
            selected: {},
            mainUsers: {}
        },
        watch: {
            main: function (nv,ov) {
                if(nv){
                    this.notify()
                }
            }
        },
        methods:{
            hasMainUser: function(){
                return Object.keys(this.mainUsers).length;
            },
            chooseAll(items){
                var t = this;
                items.forEach(function (v) {
                    Vue.set(t.selected, v.uid, v.utname)
                })
                this.notify();
            },
            cancelAll(items){
                this.selected = {};
                this.notify();
            },
            choose: function (v) {
                if(this.selected[v.uid]){
                    Vue.delete(this.selected, v.uid);
                }  else {
                    Vue.set(this.selected, v.uid, v.utname)
                }
                this.notify();
            },
            getMainUsers: function(){
                var mainUsers = {};
                var t = this;
                this.users.forEach(function (e) {
                    if(e.uid == t.main){
                        mainUsers[e.uid] = e.utname;
                    }
                });
                return mainUsers;
            },
            notify: function(){
                if(opener && opener.onChooseCallback){
                    opener.onChooseCallback(JSON.parse(JSON.stringify({
                        mainUsers: this.getMainUsers(),
                        supportUsers: this.selected
                    })));
                }
            },

            initDep(){
                var t = this;
                $.get("/api/bpm/org/list", {type:"DEPARTMENT"}, function (msg) {
                    if(!msg.success){return}

                    if(msg.data.length){
                        msg.data[0].state = {
                            opened: true
                        }
                    }
                    $('#jstree_demo').jstree({
                        "core": {
                            "animation": 0,
                            "check_callback": true,
                            "themes": {"stripes": true},
                            'data': msg.data
                        },
                        "plugins" : [
                            "contextmenu", "search",
                            "types", "wholerow"
                        ]
                    });
                    var timer = null;
                    $("#jstree_demo").on("select_node.jstree", function (e,n) {
                        var id = n.node.id;
                        t.dusName = n.node.text;
                        if(timer){
                            clearTimeout(timer);
                            timer = null;
                        }
                        timer = setTimeout(function () {
                            $.get("/api/bpm/org/dus",{id:id}, function (msg) {
                                var da = msg.data || [];

                                var arr = [];
                                for(var j=0;j<da.length;j++){
                                    for(var i=0;i<t.users.length;i++){
                                        if(t.users[i].uid === da[j].uid){
                                            arr.push(da[j])
                                        }
                                    }
                                }
                                t.dus = arr;


                            },"json")
                        },1000/16);
                    })

                }, 'json')
            }
        },
        mounted: function(){
            this.initDep()

            if(opener && opener.onChooseInit ){
                var data = JSON.parse(JSON.stringify(opener.onChooseInit()));
                this.selected = data.supportUsers;
                this.mainUsers = data.mainUsers;
                this.users = data.all;

                for(var i in this.mainUsers){
                    this.main = i;
                }
                console.warn(data)
            }

        }

    })

    // app.$watch("main",function(val,oldval){
    //     console.log(val)
    // })

    // ----------

    /*// $.get("/api/bpm/workflow/getNextDealers", {id:id}, function (msg) {
        if(opener.app.nodes[0].dealers){
            console.log(opener.app.nodes[0].dealers)
            $("#ulist").html(tmpl({
                // data: msg.data.next[0].dealers
                data: opener.app.nodes[0].dealers
            }));
        }
        // $('input:radio:first').attr('checked', 'checked');

        if("" != zbr && zbr){
            $("input[name='person'][value='"+zbr+"']").attr("checked",true);
        }
        // 主办人
        $('input[name="person"]').click(function(){
            var person=$('input[name="person"]:checked').val();
            opener.sponsor = person;
        })

        $.each(ids || {},function (i, item) {

            $('#table1 .bg').each(function() {
                console.log($(this).attr("id"))
                if($(this).attr("id") == i){
                    $(this).css('background-color', '#409eff');
                }
            });

        })


        $('#table1 .bg').click(function(){
            if ($(this).css('background-color') === 'rgb(64, 158, 255)') {
                opener.Vue.delete(opener.app.agent, $(this).attr("id"))
                $(this).css('background-color', 'white');
            } else {
                $(this).css('background-color', '#409eff');
                opener.Vue.set(opener.app.agent, $(this).attr("id"), $(this).text().trim())
                // ids[] = $(this).text().trim();
                // ids.push($(this).attr("id"))

                // console.log(ids,names)
            }
            // opener.app.jbUserId= Object.keys(ids);
            // opener.app.jbUserName= Object.values(ids);
            // $('#table1 .bg').css('background-color') === 'rgb(51, 122, 183)')
            // var select_id = $("div[class='bg']").css('background-color') === 'rgb(51, 122, 183)';
            // $.each(select_id,function(i,item) {
            //     var value = $(item).text();
            //     console.log(i,value);
            // });

        });
        // var a = [519,522];
        // $.each(a,function(i,item){
        //     $("input[name='person'][value="+item+"]").attr("checked","checked");
        // });

        $("#content").removeClass("hide");
    // },"json")*/

    var submitFn = function(){
        submit();
    }


    $("#submit").unbind("click",submitFn).bind("click",submitFn);

    function submit() {
        window.close();
    }

</script>